<template>
	<view class="container">
		<view class="top_view">
			<view class="left_view">
				申请人
			</view>
			<view class="right_view">
				{{ dataModel.realName }}
			</view>
		</view>
		<view class="top_view">
			<view class="left_view">
				所属部门
			</view>
			<view class="right_view">
				{{ dataModel.deptName }}
			</view>
		</view>
		<view class="top_view">
			<view class="left_view">
				有效期类型
			</view>
			<view class="right_view">
				{{ dataModel.expireTypeDesc }}
			</view>
		</view>
		<view style="width: 100%;height: 20rpx;"></view>
		<view class="list_view" v-if="deviceType=='LOCK'" v-for="(item, index) in dataModel.device" :key="index">
			<view class="item_view">
				<view class="left_view">
					锁具名称
				</view>
				<view class="right_view">
					{{ item.deviceName }}
				</view>
			</view>
			<view class="item_view">
				<view class="left_view">
					ID
				</view>
				<view class="right_view">
					{{ item.deviceNo }}
				</view>
			</view>
			<view class="item_view">
				<view class="left_view">
					车站
				</view>
				<view class="right_view">
					{{ item.tenantName }}
				</view>
			</view>
			<view class="item_view">
				<view class="left_view">
					区域
				</view>
				<view class="right_view">
					{{ item.area }}
				</view>
			</view>
			<view class="item_view">
				<view class="left_view">
					安装位置
				</view>
				<view class="right_view">
					{{ item.location }}
				</view>
			</view>
		</view>

		<view class="door_list_view" v-if="deviceType=='DOOR'" v-for="(item, index) in dataModel.device" :key="index">
			<view class="door_item_view">
				<view class="Text33">
					{{ item.deviceName }}
				</view>
			</view>
			<view class="door_item_view">
				<view class="left_view">
					车站
				</view>
				<view class="right_view">
					{{ item.tenantName }}
				</view>
			</view>
			<view class="door_item_view">
				<view class="left_view">
					区域
				</view>
				<view class="right_view">
					{{ item.area }}
				</view>
			</view>
			<view class="door_item_view">
				<view class="left_view">
					安装位置
				</view>
				<view class="right_view">
					{{ item.location }}
				</view>
			</view>
		</view>
		<view class="bottom_view" v-if="status==='1'">
			<view class="refuse_view" @click="approveAction(3)">
				拒绝
			</view>
			<view class="pass_view" @click="approveAction(2)">
				通过
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				deviceType: '',
				authorizeId: '',
				status: '',
				dataModel: {}
			}
		},
		onLoad() {
			this.authorizeId = this.$Route.query.authorizeId
			this.deviceType = this.$Route.query.deviceType
			// status: 申请状态，1：待审批 2：审批通过 3：审批拒绝4：用户取消
			this.status = this.$Route.query.status
			this.getApproveDetailData()
		},
		methods: {
			getApproveDetailData() {
				var that = this
				this.$apis.getApproveDetail(this.authorizeId).then(result => {
					if (result.res.data.code == '200') {
						that.dataModel = result.res.data.data;
					} else {
						that.$show.toastMessage(result.res.data.msg);
					}
				})
			},
			approveAction(applyStatus) {
				var that = this
				this.$apis.authorizeApplyApprove({
					id: this.authorizeId,
					applyStatus: applyStatus
				}).then(result => {
					if (result.res.data.code == '200') {
						let msg = applyStatus === 2 ? '申请已通过' : '申请已拒绝'
						this.$show.toastMessage(msg);
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else {
						that.$show.toastMessage(result.res.data.msg);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		background-color: #F8F8F8;
	}

	.top_view {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #E8E8E8;
	}

	.list_view {
		border-top: 1rpx solid #E8E8E8;

		.item_view {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #E8E8E8;

		}
	}

	.door_list_view {
		background-color: #FFFFFF;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx 0;

		.door_item_view {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 30rpx;
			color: #333333;
		}
	}

	.bottom_view {
		width: 100%;
		height: 120rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		background-color: #FFFFFF;

		.refuse_view {
			width: 40%;
			height: 80rpx;
			color: #324DEC;
			border: 1px solid #324DEC;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 40rpx;
		}

		.pass_view {
			width: 50%;
			height: 80rpx;
			background-color: #324DEC;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
			border-radius: 40rpx;
		}
	}
</style>